<template>
  <div class='we-chat'>
    <we-chat-login v-if='!isLogin' @sign='handleLogin' />
    <we-chat-content v-else />
  </div>
</template>

<script setup lang='ts'>
import WeChatLogin from '@/components/systemWindow/weChat/weChatLogin.vue'
import WeChatContent from '@/components/systemWindow/weChat/weChatContent.vue'
import { inject, onBeforeUnmount, ref } from 'vue'
import { useDeskAppStore } from '@/stores/systemApp/deskApp'
import { useRunningTasksStore } from '@/stores/taskBar/runningTasks'
import { trayMitt } from '@/utils/utils'

const runningTasksStore = useRunningTasksStore()
const deskAppStore = useDeskAppStore()

const appId = inject<string>('appId') || ''
const taskId = inject<string>('taskId') || ''
const componentData = inject<{ [key: string]: unknown }>('componentData')

const isLogin = ref<boolean>(componentData?.isLogin as boolean || false)

// 登录
const handleLogin = (): void => {
  isLogin.value = true
  const weChat = deskAppStore.$state.deskAppList.find((item) => item.appId === 'weChat')
  if (!weChat) return
  const size = weChat.size['content'] || []
  const x = (innerWidth - size[0]) / 2
  const y = (innerHeight - size[1]) / 2
  runningTasksStore.setTaskPatch(appId, taskId, {
    x,
    y,
    endX: x,
    endY: y,
    width: size[0],
    height: size[1],
    minSize: [size[2], size[3]],
    maxSize: [size[4], size[5]],
    isResize: size[size.length - 1] !== 0,
    componentData: { isLogin: true }
  })
}

trayMitt.on('trayClick', (data) => {
  if (appId === data.appId && taskId === data.taskId) {
    runningTasksStore.setTaskToMin(appId, taskId, false)
    runningTasksStore.checkedCurrentTask(appId, taskId)
  }
})

onBeforeUnmount(() => {
  trayMitt.off('trayClick')
})
</script>

<style scoped lang='scss'>
.we-chat {
  width: 100%;
  height: 100%;
  background-color: transparent;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
}
</style>
